<template>
  <div id="ReceivablesCode">
      <p>扫一扫收款 (元)</p>
      <p class="price">￥<i>{{money}}</i></p>
      <div class="box_content">
        <div class="code_img_box">
          <img class="code" :src="url" alt="">
        </div>
        <div class="box_content_code_text">
          <div class="scan_icon">
            <img src="../../assets/images/receviables_saomiao.png" alt="">
          </div>
          <div class="box_content_code_right">
            <span class="info_text">用微信或支付宝</span>
            <span class="info_text">扫一扫完成付款</span>
          </div>
        </div>
      </div>
      <div v-transfer-dom>
        <alert v-model="show" @on-hide="onHide">
          <p solt="default">提示:对方已完成付款 , <router-link style="color:#51ac33 " to="/index">回到主页</router-link></p>
        </alert>
      </div>
  </div>
</template>

<script>
  import {  Grid,Group, GridItem, GroupTitle,XInput,XButton,Alert,AlertModule,TransferDomDirective as TransferDom,cookie } from 'vux'
  import { sorts,sign } from '../../aes/make';
  import {publicObject} from '../../assets/js/public';
  import { Decrypt} from '../../aes/aes';
  import { getIsPaySm } from '../../mock/api';
  export default {
    name: "complaint-index",
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Alert,
      Grid,
      GridItem,
      GroupTitle,
      XInput,
      Group
    },
    data(){
      return{
        tab:0,
        show:false,
        order:'',
        url:'',
        money:'',
        time:''
      }
    },
    computed:{

    },
    created () {
      let vue = this
      vue.updateTitle('收 款');
      vue.updateGreenRightNum(0);
      // vue.updateUrlBack('/index.php?s=/shop/user/personal_center');
      // vue.updatePreventGoBack(true);
      var url=this.$route.query.url;
      var order=this.$route.query.order;
      var money=this.$route.query.money;
      this.money=money;
      this.url=url;
      this.order=order;
    },
    mounted(){
      this.orderFun();
    },
    methods: {
      checkFun(){
        if(/[" '/~`<>%)(&*+]/.test(this.text)){
          this.text=this.text.replace(/[" '/~`<>%;)(&*+]/,"")
        }
      },
      orderFun () {
        let vue=this;
        var json={
          order_num:this.order
        }
        var gid=cookie.get('gid');
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var sort=sorts();
        json['gid']=gid;
        json['uid']=uid;
        json['access_token']=access_token;
        json['sorts']=sort;
        var si=sign(json);
        json['sign']=si;
        json=publicObject.urlStr(json);
        console.log(json)
        this.time=window.setInterval(function(){
          getIsPaySm(json).then((res) => {
            if(res.code==2000){
              window.clearInterval(this.time);
              this.show=false;
            }
          })
        },1000)
      },
      onHide(){
        this.$router.push({name:'PurchaseIndex'})
      }
    },
    beforeDestroy(){
      window.clearInterval(this.time);
    }
  }
</script>

<style lang="less" scoped>
  @green:#51ac33;
  @blue:#1babe3;
  @huang:#ff6000;
  @red:#ff0000;
  html, body{
    background-color: #ffffff;
  }
  #ReceivablesCode{
    padding-top: 2.15rem;
    margin-top: -46px;
    background-color: #ffffff;
    height: 100%;
    position: absolute;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    p{
      font-size: 16px;
      text-align: center;
      margin-bottom: 5px;
    }
    .price{
      font-size: 20px;
      color: @red;
      i{
        font-size: 30px;
        color: @red;
        font-weight: bold;
      }
    }
    .weui-cell{
      padding: 15px;
    }
    .box_content {
      border: 1px solid #ccc;
      width: 6rem;
      min-width: 205px;
      margin: 0 auto;
      padding: 5px;
      margin-top:0.8rem ;
    }
    .code_img_box {
      width: 100%;
    }
    .code {
      width: 100%;
      display: block;
    }
    .box_content_code_text {
      padding: 10px;
      margin: 0 auto;
      width: 200px;
    }
    .scan_icon {
      display: inline-block;
      float: left;
      height: 44px;
      line-height: 44px;
      margin-right: 30px;
      margin-top: 5px;
      img {
        width: 35px;
      }
    }
    .box_content_code_right {
      display: inline-block;
      height: 44px;
    }
    .info_text {
      font-size: 14px;
      display: block;
    }
  }
</style>
